<template>
	<div class="pad-split-page" ref="splitpage" :class="setting.direction" :style="{ flexDirection: direction }">
		<div class="pad-page one" :style="type + ':' + ratioComputed"><slot name="one"></slot></div>
		<div class="pad-page-bar"  :style="type + ':' + barWidth" @mousedown="onMouseDown" v-on:panstart="onMouseDown" ></div>
		<div class="pad-page two"><slot name="two"></slot></div>
	</div>
</template>

<script setup>
//https://juejin.cn/post/6941785036173606926#heading-14
//https://github.com/vuejs/vue-touch/tree/next
import { defineProps, computed, ref, reactive } from 'vue';
const splitpage = ref();
const setting = defineProps({
	direction:{
		type: String,
		default: 'vertical'
	},
	barWidth:{
		type:Number,
		default: 15
	},
	ratio:{
		type:Number,
		default: 50
	},
	min: {
		type: Number,
		default: 10
	},
	max: {
		type: Number,
		default: 90
	}
})
const data = reactive({ offset:0,ratio:setting.ratio});
const type = computed(() => {
	return setting.direction === 'vertical' ? 'width' : 'height'
});
const direction = computed(()=>{
	return setting.direction === 'vertical' ? 'row' : 'column'
})
const ratioComputed = computed(() => {
	return `calc(${data.ratio}% - ${setting.barWidth / 2 + 'px'})`
})

const barWidth = computed(()=>{
	return setting.barWidth + 'px'
})

const onMouseDown = function(e){
	document.addEventListener('mousemove', onMouseMove)
	document.addEventListener('mouseup', onMouseUp)
	if(setting.direction === 'vertical'){
		data.offset = e.pageX - e.srcElement.getBoundingClientRect().left;
	} else {
		data.offset = e.pageY - e.srcElement.getBoundingClientRect().top;
	}
}

const onMouseMove = function(e){
	//console.log("splitpage ===========>" + JSON.stringify(splitpage.value))
	const rect = splitpage.value.getBoundingClientRect();
	if(setting.direction === 'vertical'){
		let offset = e.pageX - rect.left - data.offset + setting.barWidth / 2
		data.ratio = (offset / rect.width) * 100
		//console.log("offset======>" + offset  + "rect ===========>" + JSON.stringify(rect))
	} else {
		let offset = e.pageY - rect.top - data.offset + setting.barWidth / 2
		data.ratio = (offset / rect.height) * 100
		//console.log("offset======>" + offset)
	}
	if (data.ratio < data.min) {
		data.ratio = data.min
	}
	if (data.ratio > data.max) {
		data.ratio = data.max
	}
}
const onMouseUp = function(){
	document.removeEventListener('mousemove', onMouseMove)
	document.removeEventListener('mouseup', onMouseUp)
}
</script>

<style lang="less">
.pad-split-page {
	background: palegreen;
	height: 100%;
	display: flex;
	&.vertical {
		.pad-page {
			height: 100%;
		}
		.pad-page-bar {
			height: 100%;
			cursor: col-resize;
		}
	}
	&.horizontal {
		.pad-page {
			width: 100%;
		}
		.pad-page-bar {
			width: 100%;
			cursor: row-resize;
		}
	}
	.one {
		background: palevioletred;
	}
	.pad-page-bar {
		user-select: none;
		background: palegoldenrod;
	}
	.two {
		flex: 1;
		background: turquoise;
	}
}
</style>
